<template>
    <div id="content">
        <div class="page-header">
            <div class="container-fluid">
                <div class="pull-right">
                    <a  title="保存" class="btn btn-primary" v-on:click="do_edit()" >
                        <i class="fa fa-save"></i>
                    </a>
                    <a href="#" data-toggle="tooltip" title=""
                       class="btn btn-default" data-original-title="取消">
                        <i class="fa fa-reply"></i>
                    </a>
                </div>
                <h1>支付管理</h1>
                <ul class="breadcrumb">
                    <li><a href="#">首页</a></li>
                    <li><a href="#/payment/payment">支付管理</a></li>
                </ul>
            </div>
        </div>
        <div class="container-fluid">    <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-pencil"></i> 编辑支付信息</h3>
            </div>
            <div class="panel-body">

                <form action="#" method="post" enctype="multipart/form-data" id="form-payment" class="form-horizontal">

                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab-general" data-toggle="tab" aria-expanded="true">基本信息</a></li>
                        <li class=""><a href="#tab-config" data-toggle="tab" aria-expanded="true">支付配置</a></li>

                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab-general">
                            <div class="row">

                                <div class="col-sm-12">
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="tab-payment">
                                            <fieldset>
                                                <legend>基本信息</legend>

                                                <div class="form-group required">
                                                    <label class="col-sm-2 control-label" for="input-fullname">名称</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" v-model="payment_info.name" placeholder="姓名" id="input-fullname" class="form-control">
                                                    </div>
                                                </div>

                                                <div class="form-group required">
                                                    <label class="col-sm-2 control-label" for="input-telephone">code</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" v-model="payment_info.code" placeholder="电话" id="input-telephone" class="form-control">
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label" for="input-status">状态</label>
                                                    <div class="col-sm-10">
                                                        <select v-model="payment_info.active" id="input-status" class="form-control">
                                                            <option value="1" >启用</option>
                                                            <option value="0" >禁用</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </fieldset>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane " id="tab-config">
                            <div class="row">

                                <div class="col-sm-12">
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="tab-config">
                                            <fieldset v-show="payment_info.code=='wechat'">
                                                <legend>支付配置</legend>

                                                <div class="form-group required">
                                                    <label class="col-sm-2 control-label" for="input-fullname">APPID</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" v-model="pay_config.wechat.APPID" placeholder="APPID"  class="form-control">
                                                    </div>
                                                </div>

                                                <div class="form-group required">
                                                    <label class="col-sm-2 control-label" for="input-fullname">公众帐号secert</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" v-model="pay_config.wechat.APPSECRET" placeholder="公众帐号secert"  class="form-control">
                                                    </div>
                                                </div>

                                                <div class="form-group required">
                                                    <label class="col-sm-2 control-label" for="input-telephone">商户ID</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" v-model="pay_config.wechat.MCHID" placeholder="商户ID"  class="form-control">
                                                    </div>
                                                </div>

                                                <div class="form-group required">
                                                    <label class="col-sm-2 control-label" for="input-telephone">商户支付密钥</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" v-model="pay_config.wechat.KEY" placeholder="商户支付密钥"  class="form-control">
                                                    </div>
                                                </div>


                                            </fieldset>

                                            <fieldset  v-show="payment_info.code=='alipay'">
                                                <legend>支付配置</legend>

                                                <div class="form-group required">
                                                    <label class="col-sm-2 control-label" for="input-fullname">APPID</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" v-model="pay_config.alipay.APPID" placeholder="APPID"  class="form-control">
                                                    </div>
                                                </div>

                                            </fieldset>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                <!---->
                </form>

            </div>
        </div>
        </div>
    </div>
</template>

<script>
    export default {
        data:function(){

            return {

                payment_id:0,

                payment_info:{


                },
                payment_info_config:{



                },

                pay_config:{

                    wechat:{
                        APPID       : '',
                        APPSECRET   : '',
                        MCHID       : '',
                        KEY         : '',
                    },

                    alipay:{
                        APPID       : '',
                    }


                },

            }
        },

        methods:{

            get_info:function(){

                var url = this.config.web_url + '/admin.php?r=payment/info&payment_id=' + this.payment_id;
                var t = this;

                this.axios.get( url ).then(function( res ){

                    t.payment_info = res.data;
                    t.payment_info.config = t.payment_info.config ? t.payment_info.config : {};

                    var config_template = t.pay_config[ t.payment_info.code ];

                    if( !config_template ){
                        // alert('暂不支持该支付方式');
                        return;
                    }

                    for(var p in config_template ){
                        config_template[p] = t.payment_info.config[p] ? t.payment_info.config[p] : '';
                    }

                });

            },

            do_edit:function(){

                var url = this.config.web_url + '/admin.php?r=payment/edit&payment_id=' + this.payment_id;
                var t = this;

                var data = '';

                data += 'name=' + this.payment_info.name + '&';
                data += 'code=' + this.payment_info.code + '&';
                data += 'active=' + this.payment_info.active + '&';

                data += 'config=' +  JSON.stringify( this.pay_config[ this.payment_info.code ] ) + '&';



                this.axios.post( url, data ).then(function( res ){

                    if( !res.data.status ){

                        t.$router.push('/payment/payment');
                    }else{

                        alert( res.data.description );
                    }


                });

            },


        },


        created:function(){

            this.payment_id = this.$route.params.payment_id;
            this.get_info();

        }

    }
</script>

<style scoped>

</style>